<template>
  <div id="app">
    <el-card shadow="always">
      <el-form :inline="true" :model="booksearch" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="booksearch.bookname" placeholder="书本名"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="booksearch.type" placeholder="类型"></el-input>
        </el-form-item>
        <el-form-item >
          <el-select v-model="booksearch.authorid" placeholder="作者">
            <el-option label="所有作者" value="0"></el-option>
            <el-option :label="a.authorname" value="a.authorid" v-for="a in authorlist" :key="a.authorid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" plain @click="search">查询</el-button>
          <el-button type="insert" icon="el-icon-search" plain @click="addbook">添加书本</el-button>
          <el-button type="deletemore" icon="el-icon-remove" plain @click="handleDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    <el-table
        :data="booklist"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      @selection-change="handleSelectionChange">
      <el-table-column
          label="书本编号"
          prop="bookid"
          align="centry"
          width="180">
      </el-table-column>
      <el-table-column
          label="书名"
          prop="bookname"
          align="centry">
      </el-table-column>
      <el-table-column
          label="类型"
          prop="type"
          align="centry">
      </el-table-column>
      <el-table-column
          label="价格"
          prop="price"
          align="centry">
      </el-table-column>
      <el-table-column
          label="作者编号"
          prop="authorid"
          align="centry">
      </el-table-column>
      <el-table-column
          label="作者名"
          prop="authorname"
          align="centry">
      </el-table-column>
      <el-table-column label="操作" >
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
    <el-dialog :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
      <el-form :model="bookIU" :rules="rules" ref="ruleForm" >
        <el-form-item label="书本名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="bookIU.bookname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="书本类型" prop="type"  :label-width="formLabelWidth">
          <el-radio v-model="bookIU.type" label="长篇小说">长篇小说</el-radio>
          <el-radio v-model="bookIU.type" label="短篇小说">短篇小说</el-radio>
          <el-radio v-model="bookIU.type" label="散文">散文</el-radio>
        </el-form-item>
        <el-form-item label="价格" prop="price" :label-width="formLabelWidth">
          <el-input v-model.number="bookIU.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者名" prop="authorid" :label-width="formLabelWidth">
          <el-select v-model="bookIU.authorid" placeholder="请选择作者">
            <el-option label="所有作者" value="0"></el-option>
            <el-option :label="c.authorname" :value="c.authorid" v-for="c in authorlist" :key="c.authorid"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertbook">添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import bookApi from "@/api/book"
import authorApi from "@/api/author"
export default {
  data(){
  return {
    booklist:[],
    page:1,
    pagesize:5,
    total:10,
    booksearch:{},
    authorlist:[],
    title:"添加书本",
    dialogFormVisible:false,
    bookIU:{},
    formLabelWidth:'100px',
    multipleSelection:[],
    bids:[],
    rules:{
      bookname:[
        {required:true,message:"书本名不能为空",trigger:"blur"},
      ],
      type:[
        {required:true,message:"书本类型不能为空",trigger:"blur"}
      ],
      price:[
        {required:true,message:"书本价格不能为空",trigger:"blur"}
      ],
      authorid:[
          {required:true,message:"作者名不能为空",trigger:"blur"}
      ]
    }
  }
},
  created() {

    this.findallauthor()

    this.search()
   // this.findallbooks()
  },
  methods:{
    async  findallbooks(){
      const {data:a}=await bookApi.findallbooks()
      if(a.code===200){
        this.booklist=a.data.list
      }
    },
    async findallauthor(){
      const {data:a}=await authorApi.findallauthor()
      //console.log(a)
      if(a.code===200){
        this.authorlist=a.data.items
      }
    },
    async search(){
      const {data:a}=await bookApi.search(this.page,this.pagesize,this.booksearch)
      console.log(a)
      if(a.code===200){
        this.booklist=a.data.aa.rows
        this.total=a.data.aa.total
      }
    },
    addbook(){
      this.title='添加书本'
      this.bookIU={}
      this.dialogFormVisible=true;
    },
    insertbook(){
      this.$refs.ruleForm.validate(async valid=>{
        let url ='/book/add'
        let method='post'
        if(this.bookIU.bookid){
          url='/book/update'
          method='put'
        }
        if (valid) {
          const {data: a} = await bookApi.insert(url, method, this.bookIU)
          if (a.code === 200) {
            this.$message({
              message: a.message,
              type: 'success',
              onClose: () => {
                this.dialogFormVisible = false
                this.search()
              }
            })
          } else {
            this.$message({
              message: a.message,
              type: 'error'
            })
          }
        } else {console.log("验证失败");
          return false
        }
      })
    },
    handleEdit(index, row) {
      this.title='修改书本信息'
      this.bookIU=row
      this.dialogFormVisible=true;
      console.log(index, row)
    },
    handleDelete(index, row) {
      this.bookids = []
      if(row){
        this.bookids.push(row.bookid)
      }else{
        this.bookids = this.multipleSelection.map(a => a.bookid)
      }
      this.$confirm(`是否删除书本编号为${this.bookids}的书本吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {       // 确定后执行
        let _this = this
        bookApi.deletebooks(this.bookids)
            .then(({data:b}) => {
              if (b.code === 200) {
                this.$message({
                  type: 'success',
                  message: b.message,
                  onClose: () => {
                    // 重新加载数据
                    _this.search()
                  }
                })
              } else {
                this.$message({
                  type: 'error',
                  message: b.message
                })
              }
            })
      }).catch(() => {     // 取消执行
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleSizeChange(val) {
      this.pagesize=val;
      this.search()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page=val;
      this.search()
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style>
#app{
  display: flex;
  justify-content: center;
}
.el-card{
  width: 90%;
}
.el-pagination{
  margin-top: 20px;
  text-align: right;
}
</style>